<template>
  <view class="task-swiper-content">
    <nut-swiper
      :init-page="page"
      :pagination-visible="true"
      pagination-color="#426543"
      @change="swiperChange"
    >
      <nut-swiper-item
        v-for="(item, index) in swiperList"
        :key="index"
        @click="handleTaskDeails(item)"
      >
        <!-- actived状态改变 -->
        <view
          class="swiper-box"
          :class="item?.colorClass"
        >
          <view class="task-swiper-list">
            <view
              class="task-swiper-tag"
              :class="item?.colorClass"
            >
              <text>立即处理</text>
            </view>
            <view
              class="task-swiper-item"
              :class="item?.colorClass"
            >
              <view class="item-status-time">
                <text>{{ item.urgencyText }}</text>
                <text>截止{{ item.dealTime }}</text>
              </view>
              <view class="task-swiper-title">
                <text>{{ item.title }}</text>
              </view>
              <view class="task-swiper-user">
                <view class="user-name">
                  <text>发起人：</text>
                  <view class="user-name-text">
                    <img
                      :src="item?.avatarUrl"
                      alt=""
                    />
                    <text>{{ item?.nickName }}</text>
                  </view>
                </view>
                <nut-divider
                  direction="vertical"
                  :style="{ borderColor: '#999' }"
                />
                <view class="collaborate-user">
                  <text>协作人员：</text>
                  <text>{{ item.itemCount ? item.itemCount : 0 }}人</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </nut-swiper-item>
      <template v-slot:page>
        <div class="swiper-pager">
          <view
            v-for="(item, index) in swiperList"
            :key="index"
            class="swiper-pager-item"
            :class="activeColorClass === index ? item.colorClass : ''"
          >
            <text></text>
          </view>
        </div>
      </template>
    </nut-swiper>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { navigateTo } from "@tarojs/taro";
const isPager = ref(false);
const page = ref(0);
const activeColorClass = ref(0);
const props = defineProps(["taskCountsData"]);
const taskCountsData = ref(props.taskCountsData);
const swiperList = ref([]);
watch(
  () => props.taskCountsData,
  newVal => {
    taskCountsData.value = newVal;
    swiperList.value = newVal?.list;
    swiperList.value?.map((item: any, index: number) => {
      // (0-否 1-是)是否是紧急
      if (item?.urgency == 1) {
        item.colorClass = "active1";
        item.urgencyText = "紧急";
      } else {
        item.colorClass = "active2";
        item.urgencyText = "逾期";
      }
      console.log(swiperList.value, "newVal");
    });
  },
);
const handleTaskDeails = item => {
  console.log("查看详情");
  navigateTo({
    url: "/packageB/pages/taskManagement/taskDetails/index?taskId=" + item.taskId,
  });
};
const swiperChange = (val: number) => {
  activeColorClass.value = val;
};
</script>

<style lang="less">
@import "./index.less";
</style>
